<template>
  <div>
    <Header/>

    <div class="content clearfix">
      <div class="detail-left">
        <div class="detail-left-title">{{ product.productName }}({{ product.productNo }}期)</div>
        <ul class="detail-left-number">
          <li>
            <span>历史年化收益率</span>
            <p><b>{{ product.rate }}</b>%</p>
            <span>历史年化收益率</span>
          </li>
          <li>
            <span>募集金额（元）</span>
            <p><b>{{ product.productMoney }}</b>元</p>
            <span>募集中&nbsp;&nbsp;剩余募集金额{{ product.leftProductMoney }}元</span>
          </li>
          <li>
            <span>投资周期</span>
            <p><b>{{ product.cycle }}</b>个月</p>
          </li>
        </ul>
        <div class="detail-left-way">
          <span>收益获取方式</span>
          <span>收益返还：<i>到期还本付息</i></span>
        </div>

        <!--投资记录-->
        <div class="datail-record">
          <h2 class="datail-record-title">投资记录</h2>
          <div class="datail-record-list">
            <table align="center" width="880" border="0" cellspacing="0" cellpadding="0">
              <colgroup>
                <col style="width: 72px"/>
                <col style="width: 203px"/>
                <col style="width: 251px"/>
                <col style="width: 354px"/>
              </colgroup>
              <thead class="datail_thead">
              <tr>
                <th>序号</th>
                <th>投资人</th>
                <th>投资金额（元）</th>
                <th>投资时间</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="r,i in records">
                <td>{{ i + 1 }}</td>
                <td class="datail-record-phone">{{ r.phone | phoneCloak }}</td>
                <td>{{ r.money | formatMoney }}</td>
                <td>{{ r.time | formatDate }}</td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>

      </div>
      <!--右侧-->
      <div class="detail-right">
        <div class="detail-right-title">立即投资</div>
        <div class="detail-right-mode">
          <h3 class="detail-right-mode-title">收益方式</h3>
          <p class="detail-right-mode-p"><span>到期还本付息</span></p>
          <h3 class="detail-right-mode-title">我的账户可用</h3>
          <div class="detail-right-mode-rmb">
            <p>资金（元）：******</p>
          </div>
          <h3 class="detail-right-mode-title">预计本息收入（元）</h3>
          <form action="" id="number_submit">
            <p>请在下方输入投资金额</p>
            <input v-model.number="money" type="text" placeholder="请输入日投资金额，应为100元整倍数" name="" class="number-money">
            <input type="button" @click="bid" value="立即投资" class="submit-btn">
          </form>

        </div>

      </div>
    </div>

    <Footer/>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Vue from "vue";
import filters from "@/utils/filters";

export default {
  name: "Detail",
  data() {
    return {
      product: {},
      records: [],
      money: ''
    }
  },
  methods: {
    bid() {
      if (this.money > 0 && this.money % 100 == 0) {
        let pid = this.$route.query.id;
        Vue.axios.post("/bid/bid" + pid + "/" + this.money).then(resp => {
          if (resp.data.success) {
            alert("投资成功！");
          }
          if (resp.data.msg) {
            alert(resp.data.msg);
          }
        })
      } else {
        alert("投资金额不合法！")
      }
    }
  },
  filters,
  created() {
    // 获取查询参数id
    //console.log(this.$route.query.id);
    let id = this.$route.query.id;
    Vue.axios.get("/product/" + id).then(resp => this.product = resp.data)
    // 投资记录
    Vue.axios.get("/bid/records/" + id).then(resp => this.records = resp.data)
  },
  components: {Footer, Header}
}
</script>

<style scoped>

</style>